
let getToken = localStorage.getItem("token")

// 登录模态框
window.addEventListener("load", () => {
    if (getToken) {
        isLogin()
    }
    //获取开启按钮，登录框
    const openLoginBox = document.querySelector(".user")
    //关闭
    const closeLoginBox = document.querySelector(".login_model_box_close")
    const loginModelBox = document.querySelector(".login_model_box")

    //打开功能
    openLoginBox.addEventListener("click", () => {
        getToken = localStorage.getItem("token")
        if (getToken) {
            window.open("personal_detail.html")
        }
        else {
            loginModelBox.style.display = "block"
        }

    })
    //关闭
    closeLoginBox.addEventListener("click", () => {
        loginModelBox.style.display = "none"
    })
})

//模态框内登录注册切换
const login = document.querySelector(".login")
const register = document.querySelector(".register")
const toLogin = document.querySelector(".to_login")
const toRegister = document.querySelector(".to_register")
toLogin.addEventListener("click", function () {
    login.style.display = "block"
    register.style.display = "none"
    // console.log('1')
})
toRegister.addEventListener("click", function () {
    login.style.display = "none"
    register.style.display = "block"
    // console.log('2')
})


// register
const registerBtn = document.querySelector(".login_model_box_submit_register")
// 需要修改button的type，防止提交自动刷新页面，数据丢失
registerBtn.addEventListener("click", () => {
    // 点击后再获取，否则页面一加载就获取了，是空值
    const registerUsername = document.querySelector(".register_username").value
    const registerPassword = document.querySelector(".register_password").value
    if (registerPassword.length < 6) alert('密码应不少于六位')
    else {
        const xhr = new XMLHttpRequest()
        xhr.responseType = 'json'
        // 准备提交的数据
        xhr.open('POST', `https://blog.zifeiyu.love/user/register?username=${registerUsername}&password=${registerPassword}`)
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/json')
        //设置请求体，发起请求
        xhr.send()
        xhr.addEventListener("readystatechange", function () {
            if (this.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // console.log(this.response);
                    alert('注册成功')
                }
                else {
                    console.error('Request failed:' + xhr.status)
                    // alert(xhr.response.errorMsg)
                }
            }
        })
    }
})

// login
function login_() {
    const loginBtn = document.querySelector(".login_model_box_submit_login")
    loginBtn.addEventListener("click", () => {
        const loginUsername = document.querySelector(".login_username").value
        const loginPassword = document.querySelector(".login_password").value
        const xhr = new XMLHttpRequest()
        xhr.responseType = 'json'
        xhr.open('GET', `https://blog.zifeiyu.love/user/login?username=${loginUsername}&password=${loginPassword}`)
        xhr.send()
        xhr.addEventListener("readystatechange", function () {
            if (this.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // console.log(this.response);
                    document.querySelector(".login_model_box").style.display = "none"
                    alert("登录成功")
                    location.reload()
                    localStorage.setItem("token", this.response.data.tokenValue)
                    getToken = localStorage.getItem("token")   //简单数据类型不需要转换成json格式
                    document.querySelector(".user_icon").src = "images/user_login_icon.png"
                    document.querySelector(".user-droplist").style.opacity = "0"
                    // console.log(getToken)
                } else {
                    console.error('Request failed:' + xhr.status)
                    // alert(xhr.response.errorMsg)
                }
            }
        })
    })
}
login_()

function isLogin() {
    document.querySelector(".user_icon").src = "images/user_login_icon.png"
    document.querySelector(".user-droplist").style.opacity = "0"
}

// 退出登录
function logout() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.open('GET', `https://blog.zifeiyu.love/user/logout`)
    xhr.setRequestHeader("token", `${token}`)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                xhr.addEventListener('loadend', () => {
                    localStorage.removeItem("token")
                    location.reload()
                })
            } else {
                console.error('Request failed:' + xhr.status)
            }
        }
    }
}

// 注销账号
function logoff() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'json'
    xhr.open('GET', `https://blog.zifeiyu.love/user/logoff`)
    xhr.setRequestHeader("token", `${token}`)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                xhr.addEventListener('loadend', () => {
                    localStorage.removeItem("token")
                    location.reload()
                })
            } else {
                console.error('Request failed:' + xhr.status)
            }
        }
    }
}




